<template>
  <div>
    <el-container>
      <el-header class="inside-header">
        <div>
          <!-- 面包屑 -->
          <el-breadcrumb separator=">">
            <el-breadcrumb-item>车辆备案</el-breadcrumb-item>
            <el-breadcrumb-item>场内车辆备案</el-breadcrumb-item>
            <el-breadcrumb-item class="breadcrumbColor">场内车辆备案详情</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-header>
      <el-main>
        <el-form label-position="left" style="background: white; padding: 20px" :model="form"  ref="ruleFormRef" label-width="120px">
          <el-row>
            <el-col v-if="factoryId == 0" :span="9" >
              <el-form-item label="所属工厂" required>
                <el-input style="margin-left: 80px;width: 220px" v-model="form.factory_id" :model-value="factory.factoryNames[form.factory_id]?.factory_name"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="9">
              <el-form-item  required label-width="200px" style="margin-left: -10px; margin-right: 10px" label="环保登记编码内部管理号牌" prop="environmentalProtectionGrade">
                <el-input readonly style="width: 220px; margin-left: 10px" required="true" v-model="form.environmentalProtectionGrade" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="车牌颜色">
                <el-input readonly style="width: 220px" v-model="form.licensePlateColor" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="车辆类型">
                <el-input readonly style="width: 220px" v-model="form.vehicleType" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="9">
              <el-form-item label-width="200px" label="品牌型号">
                <el-input readonly style="width: 220px" v-model="form.brandModel" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="发动机号码">
                <el-input readonly style="width: 220px" v-model="form.engineNumber" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="注册日期">
                <el-input readonly v-if="form.registrationDate==null" placeholder="请填写" style="width: 220px" />
                <el-input readonly v-else style="width: 220px" v-model="form.registrationDate" class="w-50 m-2" placeholder="请填写"
                :value="$moment(form.registrationDate).format('YYYY-MM-DD')"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="9">
              <el-form-item label-width="200px" label="车辆识别代码">
                <el-input readonly style="width: 220px" v-model="form.vehicleIdentificationNumber" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="排放阶段" required style="margin-left: -10px; margin-right: 10px">
                <el-input readonly  style="margin-left: 10px;width: 220px" v-model="form.vehicleEmissions" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="燃料类型">
                <el-input readonly style="width: 220px" v-model="form.vehicleFuel" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="9">
              <el-form-item label-width="200px" required style="margin-left:-10px;margin-right:10px" label="企业名称" prop="enterpriseName">
                <el-input readonly style="width: 220px;margin-left:10px" v-model="form.enterpriseName" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="使用性质">
                <el-input readonly style="width: 220px" v-model="form.natureOfVehicleUse" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label-width="120px" label="所有人">
                <el-input readonly style="width: 220px" v-model="form.owner" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label-width="200px" label="住址">
                <el-input readonly v-model="form.address" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="9">
              <el-form-item label-width="200px" required style="margin-left:-10px;margin-right:10px" label="是否安装OBD" prop="obdInstallation">
                <el-input readonly style="width: 220px;margin-left:10px" v-model="form.obdInstallation" class="w-50 m-2" placeholder="请填写"/>
              </el-form-item>
            </el-col>
            <el-col :span="7">
              <el-form-item label="OBD安装日期" >
                <el-input readonly v-if="form.obdInstallationDate==null" placeholder="请填写" style="width: 650px" />
                <el-input readonly v-else style="width: 220px" v-model="form.obdInstallationDate" class="w-50 m-2" placeholder="请填写"
                  :value="$moment(form.obdInstallationDate).format('YYYY-MM-DD')"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4" style="margin-left: 25px">
              <div class="UPtsxt"><span>行驶证正本</span></div>
                    <el-upload v-model="form.drivingLicense" class="avatar-uploader" :file-list="state.fileList" action='#'
                      :limit="1" list-type="picture-card" accept="image/png,image/jpg,image/jpeg"
                      :on-preview="selectLicense" :class="{hide:showUploadLicense}">
                        <el-icon class="avatar-uploader-icon">
                          <Plus />
                        </el-icon>
                    </el-upload>
            </el-col>
            <el-col :span="4">
              <div class="UPtsxt"><span>行驶证副本</span></div>
                 <el-upload v-model="form.vehiclePhoto" class="avatar-uploader" :file-list="state.fileListVehicle" action='#'
                         :limit="1" list-type="picture-card" accept="image/png,image/jpg,image/jpeg"
                         :on-preview="selectV"  :class="{hide:showUploadV}">
                      <el-icon class="avatar-uploader-icon">
                        <Plus />
                       </el-icon>
                  </el-upload>
            </el-col>
            <el-col :span="4">
              <div class="UPtsxt"><span>随车清单</span></div>
                   <el-upload v-model="form.accompanyingList" class="avatar-uploader" :file-list="state.fileListAcc" action='#'
                           :limit="1" list-type="picture-card" accept="image/png,image/jpg,image/jpeg"
                          :on-preview="handlePictureCardPreviewAcc" :class="{hide:showUpload}">
                      <el-icon class="avatar-uploader-icon">
                        <Plus />
                      </el-icon>
                    </el-upload>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="20" style="margin: 40px 25px">
              <el-tag class="ml-2" type="danger">图片操作为本地操作,点击添加、删除或预览图片,完成后提交上传数据。</el-tag>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <div style="margin: 10px auto 20px">
              <el-col>
                <el-button class="empty-but" @click="close()">返回</el-button>
              </el-col>
            </div>
          </el-row>
        </el-form>
      </el-main>
    </el-container>
	    <!--行驶证正本查看图片弹出框-->
    <el-dialog v-model="LicenseDia" title="查看图片" width="50%" align-center>
    <span>
     <el-image :src="form.drivingLicense" />
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary"  @click="LicenseDia = false">
          关闭
        </el-button>
      </span>
    </template>
  </el-dialog>
    <!--行驶证副本看图片弹出框-->
    <el-dialog v-model="vehicleDia" title="查看图片" width="50%" align-center>
    <span>
      <el-image :src="form.vehiclePhoto" />
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary"  @click="vehicleDia = false">
          关闭
        </el-button>
      </span>
    </template>
  </el-dialog>
      <!--随车清单查看图片弹出框-->
    <el-dialog v-model="accDia" title="查看图片" width="50%" align-center>
    <span>
     <el-image :src="form.accompanyingList" />
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary"  @click="accDia = false">
          关闭
        </el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<script setup>
import { reactive, ref,onMounted } from "vue";
import { Plus } from "@element-plus/icons-vue";
import { UploadProps } from "element-plus";
// 路由
import { useRouter } from "vue-router";
import {v3ImgPreviewFn} from "v3-img-preview";
import {getFactoryInfo} from "../../../api/factory";
onMounted(()=>{
  getFactorys()
})
const router = useRouter();
let form = reactive(JSON.parse(localStorage.getItem("userObj")));
let factoryId = localStorage.getItem('factoryId')
let factory=reactive({factorys:[],factoryNames:{}});
const getFactorys = ()=>{
  getFactoryInfo({pageSize:1000}).then(res=>{
    let factorys = [];
    res.data?.list.forEach(e=>{
      factorys.push(e);
      factory.factoryNames[e.id]=e;
    })
    factory.factorys = factorys;
  })
}

// 跳转回列表页
const close = () => {
  localStorage.removeItem("userObj");
  router.push({
    path: "/onsiteIndex",
  });
};
const accDia = ref(false)
const vehicleDia = ref(false)
const  LicenseDia =  ref(false)

//行驶证正本
const  showUploadLicense = ref(true)
const drivingLicenseDig = ref(false)
let sessionDataLicense = reactive(JSON.parse(localStorage.getItem("userObj")).drivingLicense)

const func = function (){
  if(sessionDataLicense){
    showUploadLicense.value=true;
    return [{url:`${process.env.VUE_APP_BASE_API}${'/'}${sessionDataLicense}`}];
  }else{
    showUploadLicense.value=false;
    return [];
  }
};

//行驶证副本
const vehiclePhotoDig = ref(false)
const  showUploadV = ref(true)
let sessionDataVehicle = reactive(JSON.parse(localStorage.getItem("userObj")).vehiclePhoto)
const funcV = function (){
  if(sessionDataVehicle){
    showUploadV.value=true;
    return [{url:`${process.env.VUE_APP_BASE_API}${'/'}${sessionDataVehicle}`}];
  }else{
    showUploadV.value=false;
    return [];
  }
};
//随车清单（正面）
const dialogVisible = ref(false)
const  showUpload = ref(true)
let sessionDataAcc = reactive(JSON.parse(localStorage.getItem("userObj")).accompanyingList)
const funcAcc = function (){
  if(sessionDataAcc){
    showUpload.value=true;
    return [{url:`${process.env.VUE_APP_BASE_API}${'/'}${sessionDataAcc}`}];
  }else{
    showUpload.value=false;
    return [];
  }
};

const state = reactive({
  bannerUrl: '',
  fileList: func(),
  fileListAcc:funcAcc(),
  fileListVehicle:funcV(),
  fileName: '',
})
const selectV = (uploadFile) => {
  // form.vehiclePhoto = uploadFile.url
  // vehicleDia.value = true
  v3ImgPreviewFn(uploadFile.url)
}

const handlePictureCardPreviewAcc = (uploadFile) => {
  // form.accompanyingList = uploadFile.url
  // accDia.value = true
  v3ImgPreviewFn(uploadFile.url)
}
const selectLicense = (uploadFile) => {
  // form.drivingLicense = uploadFile.url
  // LicenseDia.value = true
  v3ImgPreviewFn(uploadFile.url)
}
</script>
<style scoped>
/*超出限制 隐藏图片上传*/
::v-deep .hide .el-upload--picture-card {
  display: none;
}
/* 面包屑字体颜色更改 */

.breadcrumbColor >>> .el-breadcrumb__inner {
  color: #000;
}
/* 横条蓝条样式 */

.head-bar {
  width: 100%;
  height: 40px;
  display: flex;
}
/* 内部header */

.inside-header {
  height: 20px;
  display: flex;
  justify-content: left;
  align-items: flex-start;
  background:#f2f4f5
}
.head-bar-main {
  width: 3px;
  height: 20px;
  opacity: 1;
  background: #3780b9;
  margin-right: 11px;
}
/* 文件上传文字样式 */

.UPtsxt {
  width: 120px;
  height: 30px;
}
/* 文件上传样式 */

.avatar-uploader {
  width: 120px;
  height: 120px;
  background-color: #e5f4ff;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #3780b9;
  width: 120px;
  height: 120px;
  text-align: center;
}
.avatar-img{
  width:120px;
  height:120px
}
/* 空心按钮样式 */

.empty-but {
  border: 1px solid #3780b9;
  color: #3780b9;
}
/* 实心按钮背景样式 */

.sele-but {
  background: #3780b9;
  border: 0px;
  border-radius: 2px;
  color: white;
}
</style>
